<template>
  <el-card class="m-mermaid-viewer" shadow="never" :body-style="{ padding: '5px' }">
    <div ref="content"><slot></slot></div>
    <el-button class="zoom-viewer" icon="ZoomIn" circle @click="onClick" />
    <el-image-viewer v-if="visible" :url-list="[svg]" @close="closeViewer" @wheel.native.stop />
  </el-card>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
const visible = ref(false)
const content = ref<HTMLElement>()
const svg = ref('')

function onClick() {
  const svgStr = content.value?.querySelector('svg')!.outerHTML as string
  const svgBlob = new Blob([svgStr], { type: 'image/svg+xml' })
  const svgUrl = URL.createObjectURL(svgBlob)
  svg.value = svgUrl
  visible.value = true
}

function closeViewer() {
  visible.value = false
  URL.revokeObjectURL(svg.value)
}
</script>
